<template>
  <div>

    <div ref="myElement">我是一个被引用的元素</div>
    <div>{{ fatherMessage }}</div>
    <button @click="change">123</button>

    <ChildComponent v-for="i in 3" ref="childComponentRef" @getValue="getSonValue" :fatherMessage="fatherMessage"
      v-model="fatherMessage">
      <template #slot1>
        插槽1
      </template>
      <template #slot2>
        插槽2
      </template>
      <template #slot3>
        插槽3
      </template>
    </ChildComponent>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from '@/components/ChildComponent.vue';

// 请求 。。。

const fatherMessage = ref('fs')
const childComponentRef = ref(null)

// const sonMessage = ref(null)
const getSonValue = (value) => {
  // console.log(value);
  fatherMessage.value = value
}

const change = () => {
  fatherMessage.value = '123456'
}


onMounted(() => {
  // child.value 是 <Child /> 组件的实例
  // console.log(childComponentRef.value, 'childComponentRef')
})
</script>